import React from 'react'
import {Input, Table, Popconfirm} from 'antd';
import './App.css'
import axios from "axios";

const {Search} = Input

class App extends React.Component {
    state = {
        list: [], columns: [{
            title: '任务编号', dataIndex: 'id', key: 'id',
        }, {
            title: '任务名称', dataIndex: 'name', key: 'name',
        }, {
            title: '任务描述', dataIndex: 'des', key: 'des',
        }, {
            title: '操作',
            dataIndex: 'do',
            key: 'do',
            render: (_, record) => (<Popconfirm title="Sure to delete?" onConfirm={() => this.handleDelete(_, record)}>
                <a>Delete</a>
            </Popconfirm>)
        },]
    }
    //搜索，事件回调
    onSearch = async (value) => {
        console.log(value)
        const res = await axios.get("http://localhost:3001/data/?q=${value}")
        this.setState({
            list: res.data
        })
    }

    //加载列表
    loadList = async () => {
        const res = await axios.get('http://localhost:3001/data')
        console.log(res)
        this.setState({
            list: res.data
        })
    }

    //删除
    handleDelete = async (_, record) => {
        console.log(_, record)
        await axios.delete(`http://localhost:3001/data/${record.id}`)
        this.loadList()
    }

    componentDidMount() {
        this.loadList()
    }

    render() {
        return (<div className="container">
            <div className="search-box">
                <Search
                    placeholder="input search text"
                    allowClear
                    enterButton="Search"
                    size="large"
                    onSearch={this.onSearch}
                />
            </div>
            <Table dataSource={this.state.list} columns={this.state.columns}/>
        </div>)
    }
}

export default App
